<template>
  <div class="code" :class="info && info.logoUrl ? 'flex' : ''">
    <div v-if="info && info.logoUrl" class="logo-box">
      <img width="100%" src="../../../assets/images/login.logo.text.png" alt="logo" />
    </div>
    <div class="content-box">
      <p class="header">
        <span>信息验证</span>
      </p>
      <form ref="form" action="javascript:return true" @submit.prevent="onSubmit" class="content">
        <p class="from">
          <span class="title">验证码</span>
          <input
            type="search"
            ref="input"
            @input="input"
            :value="code"
            class="text"
            placeholder="请输入验证码"
          />
        </p>
        <p class="check-box">
          <button @click="check" class="check">提交</button>
        </p>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "checkCode",
  model: {
    prop: "code",
    event: "input"
  },
  props: {
    code: {
      type: String,
      value: "F6DB545434AC4BA1AA94"
    },
    info: {
      type: Object,
      value: {}
    }
  },
  methods: {
    input(e) {
      this.$emit("input", e.target.value);
    },
    check() {
      this.$emit("check");
    },
    onSubmit() {
      return false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../../assets/styles/variable.scss';
.code {
  display: flex;
  align-items: center;
  width: 95%;
  height: 80vh;
  min-width: 9.333333rem /* 350/37.5 */;
  margin: 0 auto;
  &.flex {
    flex-direction: column;
  }
  .logo-box {
    padding-top: .426667rem /* 16/37.5 */;
    width: 100%;
    margin: 0 auto .8rem /* 30/37.5 */;
    text-align: center;
  }
  .content-box {
    width: 100%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(238, 238, 238, 1);
    box-shadow: 0 1px 8px 0 rgba(122, 122, 122, 0.29);
    border-radius: .106667rem /* 4/37.5 */;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 .533333rem /* 20/37.5 */;
      width: 100%;
      height: 1.066667rem /* 40/37.5 */;
      background: rgba(238, 238, 238, 1);
      font-size: .426667rem +$fontsize/* 16/37.5 */;
      color: #999999;
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      width: 100%;
      padding: 1.066667rem /* 40/37.5 */ .666667rem /* 25/37.5 */;
      background-color: #fff;
      min-height: 2.666667rem /* 100/37.5 */;
      .from {
        display: flex;
        min-height: .666667rem /* 25/37.5 */;
        font-size: .533333rem+$fontsize /* 20/37.5 */;
        color: #222222;
        .title {
          box-sizing: border-box;
          padding: .266667rem /* 10/37.5 */ .266667rem /* 10/37.5 */;
          font-size: .426667rem+$fontsize /* 16/37.5 */;
          // line-height: 30px;
          text-align: center;
          background: #f2f2f2;
          border: 1px solid #8cacbb;
        }
        .text {
          font-size: .4rem +$fontsize/* 15/37.5 */;
          flex: 1;
          padding: 0 .533333rem /* 20/37.5 */;
          word-break: break-all;
          border: 1px solid #8cacbb;
          border-left: none;
          -webkit-appearance: none;
        }
      }
      .check-box {
        text-align: right;
        display: flex;
        justify-content: center;
        .check {
          width: 2.666667rem /* 100/37.5 */;
          font-size: .426667rem +$fontsize/* 16/37.5 */;
          margin-top: .266667rem /* 10/37.5 */;
          padding: .266667rem /* 10/37.5 */;
          background-color: #2172ed;
          color: #fff;
          border-radius: .106667rem /* 4/37.5 */;
          border: none;
          outline: none;
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>
